<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%> 
<s:property value="jsonString" escape="false" />
  
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>后台管理系统——菜单管理</title>
</head>
<script type="text/javascript">
  
Ext.onReady(function() {   
  
    Ext.QuickTips.init();   
    var newFormWin;  
    var form1;   
    
  	//定义菜单显示目标数据源
  	var targetStore = new Ext.data.SimpleStore({
  		fields : ['target','targetid'],
  		data : [['请选择','00'],['_Parent','01'],['_MainDiv','02']]
  	}); 
  	
  	//获取选择菜单类型的所有菜单
  	 var menuTypeReader = new Ext.data.JsonReader({ 
        root : 'results',   
        totalProperty : 'totalCount', 
        id : 'id'
    	}, [ {name: 'id', mapping: 'id'},   
	        {name: 'menutype', mapping: 'name'}
	  ]); 
  	 var menuTypeStore = new Ext.data.Store( { 
        proxy : new Ext.data.HttpProxy( {
            url : 'loadAllSysMenutype.action'  
        }),   
        reader : menuTypeReader   
    });    
  	
  	
	//定义一个JsonReader对象，用于表格列表数据显示，即grid对象 
    var _jsonReader = new Ext.data.JsonReader({ 
        root : 'results',   
        totalProperty : 'totalCount', 
        id : 'id'
    	}, [ {name:'id'},
         {name:'name'},
         {name:'lastmenuid'},
         {name:'url'},
         {name:'target'},
         {name:'title'},
         {name:'sequence'},
         {name:'state'},
         {name:'remark'}
      ]);   
        
    //设置状态为 有效或无效     
  	function setState(val){
        if(val == 0){
            return '<span style="color:red;">无效</span>';
        }else {
            return '有效';
        }
        return val;
   	}
    	
	// Store对象，注意proxy配置参数，如果url : 'LevelAjaxJsonData.action'与程序在同一应用下面，就用new Ext.data.HttpProxy，如果不在同一应用中要用Ext.data.ScriptTagProxy对象   
   var ds = new Ext.data.Store( { 
        proxy : new Ext.data.HttpProxy( {
            url : 'allSysMenu.action'  
        }),   
        reader : _jsonReader   
    });   

    ds.setDefaultSort('id', 'aesc');//设置默认的排序字段 

    // ColumnModel对象，用于grid对象中的列格式化配置   

    var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {   
        id : 'id',   
        header : '编号',  
        dataIndex : 'id',   
        width : 40   
    },{ 
        header : "名称",   
        dataIndex : 'name',   
        width : 50,   
        sortable : true,   
        locked : false  
    },{ 
        header : "类型",   
        dataIndex : 'lastmenuid',   
        width : 50,   
        sortable : true,   
        locked : false  
    },{ 
        header : "父级",   
        dataIndex : 'lastmenuid',   
        width : 50,   
        sortable : true,   
        locked : false  
    },{ 
        header : "URL",   
        dataIndex : 'url',   
        width : 50,   
        sortable : true,   
        locked : false  
    },{ 
        header : "目标",   
        dataIndex : 'target',   
        width : 50,   
        sortable : true,   
        locked : false  
    },{ 
        header : "标题",   
        dataIndex : 'title',   
        width : 50,   
        sortable : true,   
        locked : false  
    },{ 
        header : "顺序",   
        dataIndex : 'sequence',   
        width : 50,   
        sortable : true,   
        locked : false  
    },{   
        header : "状态",   
        dataIndex : 'state', 
        renderer: setState,  
        width : 100   
    },{   
        header : "说明",   
        dataIndex : 'remark',   
        width : 100   
    }]); 
       
    // by default columns are sortable   
    cm.defaultSortable = true;
           
	// GridPanel对象   
    var grid = new Ext.grid.GridPanel({   
        // var grid = new Ext.grid.EditorGridPanel( {   
        collapsible : true,// 是否可以展开  
        animCollapse : false,// 展开时是否有动画效果 
        iconCls : 'icon-grid',  
        store : ds,   
        cm : cm,   
        renderTo : 'topic-grid',  
        viewConfig : {   
            forceFit : true    
        },   
        bodyStyle : "width:100%",
		monitorResize: true,
        ds: ds,
        cm: cm,
        sm: new Ext.grid.RowSelectionModel({
	                singleSelect: false,
	                listeners: {
	                    rowselect: function(sm, row, rec) {
	                        Ext.getCmp("sysMenu-form").getForm().loadRecord(rec);
	                    }
	                }
	     }),
        // 添加分页工具栏 
        bbar : new Ext.PagingToolbar( {   
            pageSize : 15,   
            store : ds,   
            displayInfo : true,   
            displayMsg : '显示 {0}-{1}条 / 共 {2} 条',   
            emptyMsg : "没有数据！" 
        }),   

        // 添加内陷的工具条 
        tbar : [ {   
            id : 'New1',   
            text : ' 新建  ',   
            tooltip : '新建菜单类型',   
            iconCls : 'add',   
            handler : function() {   
            ptb_bt1();   
            }   
        }, '-', {   
            text : '修改',   
            tooltip : '修改选中菜单类型',   
            iconCls : 'option',   
            handler : function() {   
            ptb_bt2();   
            }   
        }, '-', {   
            text : '删除',   
            tooltip : '删除选择菜单类型',   
            iconCls : 'remove',   
            handler : function() {   
            ptb_bt3();   
            }   
        }],   
        height : 408,   
        frame : true,   
        loadMask : true,// 载入遮罩动画   
        autoShow : true  
    });   
	//数据载入   
    ds.load( {   
        params : {   
            start : 0,//开始数   
            limit : 15,//每次载入数量，服务器段就根据这两个参数来处理数据分页   
            forumId : 4   
        }   
    });   
    grid.render();  

	//添加行双击事件，双击是可以打开修改窗口
   	grid.on("rowdblclick",  function(sm, row, rec){   
         loadFormData();   
     }); 
    // 载入被选择的数据行的表单数据 
    var loadFormData = function() { 
        var m = grid.getSelections();//所有被选择的行  
        if(m.length>1){
        	Ext.Msg.alert('修改操作', '请选一项要修改的数据！');
        }else{
        	var _record = grid.getSelectionModel().getSelected();
        	//alert(_record.data.id);  
	        if (!_record) {//这里判断是否有行已经被选择   
	            Ext.Msg.alert('修改操作', '请选一项要修改的数据！');   
	        } else {
	            myFormWin();   
	            form1.form.load({   
	                url : 'loadSysMenuById.action?id=' + _record.get('id'),   
	                waitMsg : '正在载入数据...', 
	                failure : function() {  
	                    Ext.Msg.alert('编辑', '载入失败');
	                    newFormWin.hide();    
	                }
	            });
	        }  
        } 
    }   
  
    // 分页工具栏按钮--新建事件 
    var ptb_bt1 = function() {   
        myFormWin();   
    };   

    // 修改操作事件
    var ptb_bt2 = function() {   
        loadFormData();   
    };

    // 删除事件 
    var ptb_bt3 = function() {   
        var _record = grid.getSelectionModel().getSelected();   
        if (_record) {//判断是否有行被选择   
            Ext.MessageBox.confirm('确认删除', '你确认要删除选中的数据项吗？', function(btn) {   
                if (btn == "yes") {   
                   delSysMenu(grid);   
                }   
            });   
        } else {   
            Ext.example.msg('删除操作', '请选择要删除的数据项！');   
        }   
    };  
        
    function delSysMenu(grid){
	   	var msgTip = Ext.Msg.show({
	   		title:'提示',
	   		width:250,
	   		msg:'正在删除，请稍后……'
	   	});
	   	var m = grid.getSelections();//所有被选择的行   
		var jsonData = ""; 
		for (var i = 0, len = m.length;i < len; i++) {   
		    var ss = m[i].get("id");   
		    if (i == 0) {   
		        jsonData = jsonData + ss;   
		    } else {   
		        jsonData = jsonData + "," + ss;   
		    } 
		}   
     	Ext.Ajax.request({
     		url:'delSysMenu.action?ids='+jsonData,
     		success : function(response,options){
     			msgTip.hide();
     			var result = Ext.util.JSON.decode(response.responseText);
     			if(result.success){
			var m = grid.getSelections();//所有被选择的行   
			var jsonData = "";//   
			for (var i = 0, len = m.length;i < len; i++) {   
			    var ss = m[i].get("id");   
			    if (i == 0) {   
			        jsonData = jsonData + ss;   
			    } else {   
			        jsonData = jsonData + "," + ss;   
			    }   
			    ds.remove(m[i]);   
			}   
     				Ext.Msg.alert('提示','删除成功！');
     			}else{
     				Ext.Msg.alert('提示','删除失败！');
     			}
     		},
     		failure : function(response,options){
     			msgTip.hide();
     			Ext.Msg.alert('提示','请求删除失败！');
     		}
     	});
        	/*
             ds.load( {   
                 params : {   
                     start : 0,   
                     limit : 30,   
                     delData : jsonData//这里是向服务器段发送的数据信息，一般采用JSON协议，这儿直接采用，只发送用逗号分割的ID号序列， 以方便   
                 }   
             });   
             */
        } 
  
        // form_win定义一个Window对象，用于新建和修改时的弹出窗口。   
  
        var myFormWin = function() {   
            // create the window on the first click and reuse on subsequent   
            // clicks   
            if (!newFormWin) { 
                newFormWin = new Ext.Window( {   
                    el : 'topic-win',   
                    layout : 'fit',   
                    width : 400,   
                    height : 300,   
                    closeAction : 'hide',   
                    plain : true,   
                    title : '菜单管理',   
                    items : form1,   
                    reader : _jsonReader   
                });  
            }   
            newFormWin.show('New1');
        }   
  
		//用窗体Form的JsonReader对象，修改时数据载入解析
        var _jsonFormReader = new Ext.data.JsonReader( {   
            root : 'results',
			totalProperty : 'totalCount',
       		id : 'id',
       		successProperty : '@success'
        }, [ {   
            name : 'sysMenu.id',   
            mapping : 'id',   
            type : 'int'  
        }, {   
            name : 'sysMenu.name',   
            mapping : 'name'  
        }, {   
             name : 'sysMenu.lastmenuid',
            mapping : 'lastmenuid'  
        }, {   
            name : 'sysMenu.url',   
            mapping : 'url'  
        }, {   
            name : 'sysMenu.target',   
            mapping : 'target'  
        }, {   
            name : 'sysMenu.title',   
            mapping : 'title'  
        }, {   
            name : 'sysMenu.sequence',   
            mapping : 'sequence'  
        }, {   
            name : 'sysMenu.name',   
            mapping : 'name'  
        }, {   
            name : 'sysMenu.state',   
            mapping : 'state'  
        }, {   
            name : 'sysMenu.remark',   
            mapping : 'remark'  
        }]);  
        
  
        // 窗体 
        form1 = new Ext.FormPanel({   
            // collapsible : true,// 是否可以展开   
            labelWidth : 60, // label settings here cascade unless overridden
            id: 'sysMenutype-form',
            url : 'sysMenutype.action',   
            frame : true,   
            bodyStyle : 'padding:5px 5px 0',   
            width : 350,   
            waitMsgTarget : true, 
            closeAction:'hide',  
            reader : _jsonFormReader, 
            defaults : {   
                width : 230   
            },   
            defaultType : 'textfield',   
            items : [{   
                fieldLabel : '名称',   
                name : 'sysMenu.name', 
                allowBlank : false  
            },new Ext.form.ComboBox({
            	id : 'menutypeid',
            	loadingText : '正在加载菜单类型信息',
            	minChars : 3,
            	queryDelay : 300,
            	emptyText:'请选择',
            	fieldLabel : '菜单类型',
            	triggerAction : 'all',
            	stroe : menuTypeStore,
            	valueField : 'id',
            	displayField : 'menutype',
            	mode : 'remote',
            	forceSelection : true,
            	resizable : false,
            	typeAheed : true,
            	handleHeight : 10  
            }), { 
                fieldLabel : '父级菜单',  
                name : 'sysMenu.lastmenuid',
                allowBlank : false  
            },{ 
                fieldLabel : 'URL',  
                name : 'sysMenu.url',
                allowBlank : false  
            },new Ext.form.ComboBox({
            	id : 'target',
            	fieldLabel : '目标',
            	emptyText:'请选择',
            	stroe : targetStore,
            	valueField : 'target',
            	displayField : 'target',
		        typeAhead: true,
		        mode: 'local'
		     }),{ 
                fieldLabel : '标题',  
                name : 'sysMenu.title',
                allowBlank : false  
            },{ 
                fieldLabel : '排序',  
                name : 'sysMenu.sequence',
                allowBlank : false  
            }, new Ext.form.TextArea({ 
                fieldLabel : '描述',   
                name : 'sysMenu.remark',   
                growMin : 234   
            }),{ 
                fieldLabel : '状态',  
                name : 'sysMenu.state',
                allowBlank : false  
            }, new Ext.form.Hidden({                 
                name : 'sysMenu.id'
            })], 
              
            buttons : [ {   
                text : '保存',   
                disabled : false,   
                handler : function() {   
                    if (form1.form.isValid()) {   
                        form1.form.submit( {   
                            url : 'saveSysMenu.action',
                            method:'POST',   
                            success : function(from, action) {   
                                Ext.Msg.alert('保存成功', '保存菜单类型成功！');   
                                ds.load( {   
                                    params : {   
                                        start : 0,   
                                        limit : 15 
                                    }   
                                });   
                            },   
                            failure : function(form, action) {   
                                Ext.Msg.alert('保存失败', '保存菜单类型失败！');   
                            },   
                            waitMsg : '正在保存数据，稍后...'  
                        });   
                        //dialog.hide();   
                        newFormWin.hide();
                    } else {   
                        Ext.Msg.alert('提示', '请填写完成再提交!');   
                    }   
                } 
            }, {  
                text : '取消', 
                handler : function() { 
                    newFormWin.hide(); 
                } 
            }] 
        });
   });    
   
        
</script>
<body class="x-vista"> 
<div id="topic-grid"></div> 
<div id="topic-win" class="x-hidden"> 
<div class="x-window-header"></div> 
<div id="topic-tabs"></div> 
</div>  
</body>
</html>